<template>
  <div class="div">
    <Header2 :title="index" index="1"></Header2>
    <van-tabs>
      <van-tab title="商品">
        <mt-swipe :auto="4000">
          <mt-swipe-item>
            <img class="lbimg" v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/lbt1.jpg'" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img class="lbimg" v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/lbt2.jpg'" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img class="lbimg" v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/lbt3.jpg'" />
          </mt-swipe-item>
          <mt-swipe-item>
            <img class="lbimg" v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/lbt4.jpg'" />
          </mt-swipe-item>
        </mt-swipe>
        <h3>{{list.name}}</h3>

        <font class="f1">{{list.discount}}</font>
        <font class="f2">{{list.describe}}</font>
        <img src="@/assets/canshu/canshu10.png" />

        <div class="list">
          <van-cell title="已选" is-link v-model="guizhe" @click="yixuan()" />
          <van-cell title="地址" is-link v-model="shouhuodz" @click="shouhuodizhi()" />
          <van-cell title="分期" is-link value="小米/花呗" />
          <van-cell title="活动" is-link value="相关活动规则" />
          <van-cell title="礼包" is-link value="礼包领取流程" />
        </div>
        <img v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/xq.jpg'" />
      </van-tab>
      <van-tab title="详情">
        <img v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/xq.jpg'" />
      </van-tab>
      <van-tab title="评价">
        <div class="jieshao">
          <jieshao
            :name="item.name"
            :time="item.time"
            :score="item.score"
            :users="item.user"
            :evaluate="item.evaluate"
            v-for="(item,index) in list2"
            :key="index"
          ></jieshao>
        </div>
      </van-tab>
    </van-tabs>

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="gwcf()" />
      <van-goods-action-button text="加入购物车" @click="tjgwc()" type="warning" color="#be99ff" />
      <van-goods-action-button text="立即购买" color="#7232dd" @click="ljgm()" />
    </van-goods-action>
    <div>
      <van-popup v-model="show" position="bottom">
        选择
        <div class="spqddiv">
          <img class="spqdimg" v-lazy="poot+'miaozishangchengFile/commodity/'+index+'/'+index+img" />
          <div class="spqdfont">
            <font class="ft">{{list.name}}</font>
            <br />
            <font class="fm">{{nc}}&nbsp;&nbsp;&nbsp;{{ys}}</font>
            <font class="fj">{{bz}}</font>
          </div>
        </div>
        <div class="ncdiv">
          <h1 class="nch1">版本</h1>
          <div class="divbtucent">
            <van-button
              class="van-buttonbtn"
              plain
              hairline
              type="info"
              size="mini"
              v-for="(item,index) in parameterlen"
              :key="index"
              @click="ncxz(index)"
            >{{list.parameter.split(",")[index]}}</van-button>
          </div>
        </div>
        <div class="ncdiv">
          <h1 class="nch1">颜色</h1>
          <div class="divbtucent">
            <van-button
              class="van-buttonbtn"
              plain
              hairline
              type="info"
              size="mini"
              v-for="(item,index) in colourlen"
              :key="index"
              @click="ysxz(index)"
            >{{list.colour.split(",")[index]}}</van-button>
          </div>
        </div>
        <div class="ncdiv">
          <h1 class="nch2">数量</h1>
          <div class="divsl">
            <van-button class="shuliang" type="primary" size="mini" @click="jia()">+</van-button>
            {{shuliang}}
            <van-button class="shuliang" type="primary" size="mini" @click="jian()">-</van-button>
          </div>
        </div>
        <van-button
          class="jianbianbtu"
          color="linear-gradient(to left, red, orange)"
          @click="tjgwc()"
        >添加购物车</van-button>
      </van-popup>
    </div>
    <van-popup v-model="showshdz" position="bottom">
      <div class="dzdiv" v-for="(item,index) in listdz" :key="index">
        <div v-if="item.defaultaddress==0" @click="xuanzedz(index)">
          <h3 class="dzfont">{{listdz[index].name}}&nbsp;&nbsp;&nbsp;{{listdz[index].province}}</h3>
          <font
            class="dzfont"
          >{{listdz[index].city}}&nbsp;{{listdz[index].area}}&nbsp;{{listdz[index].detailed_address}}</font>
          <hr />
        </div>
        <div v-else @click="xuanzedz(index)">
          <h3
            class="dzfont2"
          >{{listdz[index].name}}&nbsp;&nbsp;&nbsp;{{listdz[index].province}} &nbsp;[默认地址]</h3>
          <font
            class="dzfont2"
          >{{listdz[index].city}}&nbsp;{{listdz[index].area}}&nbsp;{{listdz[index].detailed_address}}</font>
          <hr />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import Header2 from "@/components/Headergl/Header2";
import jieshao from "@/components/jieshao";
export default {
  data() {
    return {
      value1: 0,
      option1: [
        { text: "4+64G", value: 0 },
        { text: "8+128G", value: 1 },
        { text: "8+512G", value: 2 }
      ],
      index: this.$route.params.name,
      list: [],
      show: false,
      guizhe: "",
      parameterlen: 0,
      pricelen: 0,
      colourlen: 0,
      nc: "",
      ys: "",
      jg: "",
      img: ".jpg",
      shuliang: 1,
      bz: "",
      list2: [],
      shouhuodz: "收货地址",
      showshdz: false,
      listdz: [],
      shouhuodz2: ""
    };
  },
  methods: {
    ...mapMutations(["xggwc"]),
    ...mapMutations(["xg"]),
    ...mapMutations(["userxg"]),
    ...mapMutations(["yxxg"]),
    xuanzedz(num) {
      this.showshdz = !this.showshdz;
      this.shouhuodz = "送至  " + this.listdz[num].city + this.listdz[num].area;
      this.shouhuodz2 =
        this.listdz[num].province +","+
        this.listdz[num].city +","+
        this.listdz[num].area +","+
        this.listdz[num].detailed_address+","+
        this.listdz[num].name+","+this.listdz[num].phone;
    },
    shouhuodizhi() {
      this.showshdz = !this.showshdz;
      this.$http
        .get(this.poot + "selectaddresss/" + this.user)
        .then(response => {
          this.listdz = response.data;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    ljgm() {
      if (
        this.nc != "undefined" &&
        this.nc != null &&
        this.nc != "" &&
        this.ys != "undefined" &&
        this.ys != null &&
        this.ys != "" &&
        this.jg != "undefined" &&
        this.jg != null &&
        this.jg != "" &&
        this.shuliang != "undefined" &&
        this.shuliang != null &&
        this.shuliang != ""
      ) {
        this.$router.push(
          "/dingdan2/" +
            parseInt(this.jg) * this.shuliang +
            "/" +
            this.list.name +
            "/" +
            this.shuliang +
            "/" +
            this.nc +
            "/" +
            this.ys+
            "/"
            +this.shouhuodz2
        );
      } else {
        this.$notify({
          message: "选择有空",
          background: "red",
          duration: 1000
        });
      }
    },
    tjgwc() {
      if (
        this.nc != "undefined" &&
        this.nc != null &&
        this.nc != "" &&
        this.ys != "undefined" &&
        this.ys != null &&
        this.ys != "" &&
        this.jg != "undefined" &&
        this.jg != null &&
        this.jg != "" &&
        this.shuliang != "undefined" &&
        this.shuliang != null &&
        this.shuliang != "" &&
        this.shouhuodz2 != "undefined" &&
        this.shouhuodz2 != null &&
        this.shouhuodz2 != ""
      ) {
        this.$http
          .get(
            this.poot +
              "addcart/" +
              this.list.name +
              "/" +
              this.nc +
              "/" +
              this.ys +
              "/" +
              this.shuliang +
              "/" +
              this.jg +
              "/" +
              this.user +
              "/" +
              this.shouhuodz2
          )
          .then(response => {
            this.show = false;
            this.$toast("添加成功");
          })
          .catch(function(error) {
            console.log(error);
            this.$toast("添加失败");
          });
      } else {
        this.$notify({
          message: "选择有空",
          background: "red",
          duration: 1000
        });
      }
    },
    gwcf() {
      this.xggwc(true);
      this.xg(false);
    },
    chushihua() {
      this.$http
        .get(this.poot + "selectcommodityByname/" + this.index)
        .then(response => {
          console.log(response.data);
          this.list = response.data;
          this.parameterlen = this.list.parameter.split(",").length;
          this.pricelen = this.list.price.split(",").length;
          this.colourlen = this.list.colour.split(",").length;
        })
        .catch(function(error) {
          console.log(error);
          alert("获取数据失败");
        });
    },
    pj() {
      this.$http
        .get(this.poot + "selectevaluateByname/" + this.index)
        .then(response => {
          console.log(response.data);
          this.list2 = response.data;
        })
        .catch(function(error) {
          console.log(error);
          this.$toast("获取数据失败");
        });
    },
    yixuan() {
      this.show = !this.show;
    },
    ysxz(ys) {
      this.ys = this.list.colour.split(",")[ys];
      this.img = " " + this.list.colour.split(",")[ys] + ".jpg";
      this.guizhe = this.nc + "  " + this.ys + "  x" + this.shuliang;
    },
    ncxz(nc) {
      this.nc = this.list.parameter.split(",")[nc];
      this.jg = parseInt(this.list.price.split(",")[nc]);
      this.bz = "￥" + parseInt(this.jg) * this.shuliang;
      this.guizhe = this.nc + "  " + this.ys + "  x" + this.shuliang;
    },
    jia() {
      this.shuliang++;
      if (this.jg <= 0) {
        this.bz = "￥0";
      } else {
        this.bz = "￥" + parseInt(this.jg) * this.shuliang;
      }
      this.guizhe = this.nc + "  " + this.ys + "  x" + this.shuliang;
    },
    jian() {
      this.shuliang--;
      if (this.shuliang <= -1) {
        this.shuliang = 0;
        this.bz = "￥0";
      } else {
        this.bz = "￥" + parseInt(this.jg) * this.shuliang;
      }
      if (this.shuliang == 0) {
        this.bz = "￥0";
      }
      this.guizhe = this.nc + "  " + this.ys + "  x" + this.shuliang;
    }
  },
  computed: {
    ...mapState(["poot"]),
    ...mapState(["yx"]),
    ...mapState(["zhuantai"]),
    ...mapState(["gwc"]),
    ...mapState(["user"])
  },
  components: {
    Header2: Header2,
    jieshao: jieshao
  },

  mounted() {
    this.chushihua();
    this.pj();
  }
};
</script>
<style scoped>
.dzfont2 {
  font-size: 8px;
  color: rgb(255, 123, 0);
}
.dzdiv2 {
  text-align: left;
  margin-left: 20px;
  margin-top: 20px;
}
.dzfont {
  font-size: 8px;
}
.dzdiv {
  text-align: left;
  margin-left: 20px;
  margin-top: 20px;
}
.jieshao {
  margin-top: 10px;
}
.divbtucent {
  text-align: center;
}
.jianbianbtu {
  text-align: center;
  margin-top: 20px;
  width: 80%;
  margin-right: 20px;
}
.divsl {
  margin-left: 50%;
}
.shuliang {
  height: 20px;
  width: 20px;
}
.van-cell {
  font-size: 10px;
}
.van-buttonbtn {
  margin-left: 20px;
  width: 80px;
  height: 20px;
  font-size: 5px;
  text-align: center;
}
.ncdiv {
  text-align: left;
  margin-top: 10px;
}
.nch1 {
  margin-left: 10px;
  font-size: 5px;
}
.nch2 {
  margin-left: 10px;
  font-size: 5px;
  float: left;
}
.ft {
  font-size: 15px;
}
.fm {
  font-size: 5px;
}
.fj {
  color: red;
}
.spqdfont {
  height: 50px;
  margin-left: 25%;
}
.spqdimg {
  height: 50px;
  width: 50px;
  float: left;
}
.spqddiv {
  margin-top: 15px;
  text-align: left;
  margin-left: 20px;
}
.van-popup {
  height: 50%;
}

h3 {
  text-align: center;
  font-size: 5px;
}

.list {
  margin-bottom: 50px;
}
.div {
  margin-top: 40px;
  margin-bottom: 50px;
}
.mint-swipe {
  height: 350px;
}
.lbimg {
  width: 100%;
  height: 100%;
}
h3 {
  font-size: 15px;
  text-align: left;
  margin-left: 10px;
}
.f1 {
  color: red;
  font-size: 5px;
  text-align: left;
}
.f2 {
  font-size: 5px;
  text-align: left;
}
.van-grid {
  height: 40px;
  width: 100%;
}
.imgwg {
  height: 60%;
  width: 60%;
}
.wgzt {
  font-size: 5px;
  margin-top: 5px;
}
.van-grid-item {
  height: 80px;
}
img {
  width: 100%;
}
</style>